<script lang="ts" setup>
defineProps({
  type: {
    type: String,
    default: "text",
  },
  placeholder: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update"]);

const updateInputVal = (event: Event) => {
  if (event.target) emits("update", (event.target as HTMLInputElement).value);
};
</script>
<template>
  <!-- class="w-80 h-10 outline-none pl-5 border-1 rounded-sm text-sm pr-5" -->
  <div class="flex w-full relative">
    <input
      :type="type"
      :placeholder="placeholder"
      autocomplete="off"
      class="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-100 text-sm leading-6"
      @input="updateInputVal"
    />
    <slot />
  </div>
</template>
<style lang="scss" scoped>
.w-full {
  width: 100%;
}
</style>
